<template>
    <BasePage>
        <el-form slot="form" :inline="true" size="medium">
            <el-form-item label="合同编号">
                <el-input v-model="query.code" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="承包人">
                <el-select v-model="query.contractorId" clearable placeholder="请选择" style="width: 100%">
                    <el-option v-for="item in contractorList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="合同状态">
                <el-select v-model="query.status" clearable placeholder="请选择" style="width: 100%">
                    <el-option v-for="item in contractStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c83_d403_2' }" @click="handleFilter">查询</BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c83_d403_2' }" type="second" @click="resetConditions()">重置</BaseButton>
            </el-form-item>
        </el-form>
        <BaseButton slot="button" v-permission="{ btnCode: 'dlyh_c83_d404_2' }" @click="showAddDialog"> 新增合同 </BaseButton>
        <BaseTable slot="table" ref="table" v-loading="listLoading" :data="list" :columns="columns" highlight-current-row height="calc(100% - 73px)" @sort-change="handleSortChange">
            <template #code="{ scope: { row } }">
                <span v-if="buttonsRights.has('dlyh_c83_d405_2')" class="color-blue" style="cursor: pointer;" @click="detail(row.id)">{{ row.code }}</span>
                <span v-else>{{ row.code }}</span>
            </template>
            <template #date="{ scope: { row } }">
                <span>{{ row.startDate }} ~ {{ row.endDate }}</span>
            </template>
            <template #status="{ scope: { row } }">
                <div v-if="row.status === 1"><i class="el-icon-unlock color-yellow" style="font-size: 16px;"></i><span> 未锁定</span></div>
                <div v-if="row.status === 2"><i class="el-icon-lock color-blue" style="font-size: 16px;"></i><span> 已锁定</span></div>
            </template>
            <template #action="{ scope: { row } }">
                <BaseButton v-permission="{ btnCode: 'dlyh_c83_d405_2' }" type="text" @click="detail(row.id)"> 查看概况 </BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c83_d405_2' }" type="text" @click="detail(row.id, '3')"> 工程量清单 </BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c83_d405_2' }" type="text" @click="detail(row.id, '4')"> 计日工清单 </BaseButton>
                <BaseButton v-show="row.status === 1" v-permission="{ btnCode: 'dlyh_c83_d406_2' }" type="text" @click="handleEdit(row.id)"> 编辑 </BaseButton>
            </template>
        </BaseTable>
        <Pagination
            slot="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="page.total"
            @size-change="getList"
            @current-change="getList"
        />

        <el-dialog
            title="新增合同"
            :visible.sync="dialogVisible"
            width="480px"
        >
            <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules" label-width="130px" @submit.native.prevent>
                <el-form-item label="请选择新增模式：">
                    <el-radio-group v-model="dialogForm.type">
                        <el-radio label="1">全新创建</el-radio>
                        <el-radio label="2">复制已有合同</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="dialogForm.type === '2'" label="请选择：" prop="id">
                    <el-select v-model="dialogForm.id" clearable filterable placeholder="请选择需要复制的合同" style="width: 100%">
                        <el-option v-for="item in contractOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAdd">确定</el-button>
            </span>
        </el-dialog>
    </BasePage>
</template>

<script>
import storage from 'good-storage'
import BasePage from '@/layouts/BasePage'
import { ContractModel } from '@/models'
import useSuccess from '@/hooks/useSuccess'
import { ContractStatusOptions } from '../../constants'
import KeepAliveHandler from '@/mixins/keepAliveHandler'
import reconfirm from '@/utils/reconfirm'
export default {
    name: 'ContractList',
    components: {
        BasePage
    },
    mixins: [
        KeepAliveHandler({
            defaultCondition: {
                code: '',
                contractorId: '',
                status: '',
                sort: 2
            },
            conditionObjKey: 'query',
            tableRef: 'table'
        })
    ],
    data() {
        return {
            model: new ContractModel(),
            contractStatusOptions: ContractStatusOptions,
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            listLoading: false,
            query: {
                code: '',
                contractorId: '',
                status: '',
                sort: 2
            },
            columns: [
                {
                    slot: 'code',
                    attrs: {
                        label: '合同编号',
                        width: '150',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '合同名称',
                        prop: 'name',
                        'min-width': '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '项目名称',
                        prop: 'projectName',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '发包人',
                        prop: 'employerName',
                        width: '240',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '承包人',
                        prop: 'contractorName',
                        width: '180',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '养护项目',
                        prop: 'maintProject',
                        'min-width': '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'date',
                    attrs: {
                        label: '工期',
                        width: '200',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'status',
                    attrs: {
                        label: '合同状态',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        label: '更新人',
                        prop: 'operatorName',
                        width: '100',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '更新时间',
                        prop: 'updateTime',
                        sortable: 'custom',
                        width: '160'
                    }
                },
                {
                    slot: 'action',
                    attrs: {
                        label: '操作',
                        width: '310',
                        fixed: 'right'
                    }
                }
            ],
            list: [],
            contractorList: [],
            dialogVisible: false,
            dialogForm: {
                type: '1',
                id: ''
            },
            rules: {
                id: [{ required: true, message: '必填项', trigger: ['change'] }]
            },
            contractOptions: []
        }
    },
    computed: {
        buttonsRights() {
            return this.$store.getters['user/pageRights']
        }
    }, 
    created () {
        this.getContractorList()
        this.getList()
        // 进入列表页就把详情的tabIndex缓存删掉
        storage.session.remove('tabIndex')
    },
    methods: {
        handleSortChange({ column, prop, order }) {  
            if (prop === 'updateTime') {
                if (order === 'ascending') {  
                    this.query.sort = 1
                } else if (order === 'descending') {
                    this.query.sort = 2 
                } else {
                    this.query.sort = 2
                }
            }
            this.page.pageNo = 1
            this.getList()
        },
        getContractorList() {
            this.model
                .contractorList({type: 2})
                .then((res) => {
                    this.contractorList = res.map(item => {
                        return {
                            label: item.orgName,
                            value: item.orgId
                        }
                    })
                })
        },
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        handleDelete(id) {
            reconfirm({
                isPromise: false,
                callback: () => {
                    this.model.delete({ id: id }).then((res) => {
                        useSuccess({ message: '删除成功', onlyTip: true })
                        this.getList()
                    })
                }
            })
        },
        handleAdd() {
            this.$refs.dialogFormRef.validate((valida) => {
                if (valida) {
                    this.dialogVisible = false
                    // 如果是2就是复制已有合同
                    if (this.dialogForm.type === '2') {
                        this.handleEdit(this.dialogForm.id, 'true')
                        return
                    }
                    this.$router.push({
                        name: 'ContractAdd'
                    })
                }
            })
        },
        detail(id, activeName) {
            storage.session.set('tabIndex', activeName)
            this.$router.push({
                name: 'ContractDetail',
                query: {
                    id: id
                }
            })
        },
        handleEdit(id, isCopy = 'false') {
            this.$router.push({
                name: 'ContractAdd',
                query: {
                    id: id,
                    type: 'edit',
                    isCopy
                }
            })
        },
        getList() {
            this.listLoading = true
            this.model
                .getList(this.query, this.page)
                .then((res) => {
                    this.list = res.list
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        getAllList() {
            this.model
                .allList()
                .then((res) => {
                    this.contractOptions = (res || []).map(item => {
                        return {
                            label: item.code + ' ' + item.name,
                            value: item.id
                        }
                    })
                })
        },
        switchChange(item) {
            this.model.enable({ id: item.id, status: item.status }).then((res) => {
                useSuccess({ message: '操作成功', onlyTip: true })
                this.handleFilter()
            })
        },
        showAddDialog() {
            this.getAllList()
            this.dialogVisible = true
            this.dialogForm = {
                type: '1',
                id: ''
            }
            this.$nextTick(() => {
                this.$refs.dialogFormRef.clearValidate()
            })
        },
    }
}
</script>

<style lang="scss" scoped>
</style>
